<html>
  <head>
    <title>Plus: very basic sample</title>
    <style>
      @import url(../plus.css); /* the only thing needed to include Plus framework */
      @import url(../../note.css); 
      @import url(../../../widgets/switch/switch.css); 
      
      html { font:system; }
      table { width:*; }
      table input { display: block; vertical-align:middle;}
      tr.done > td.subject { text-decoration:line-through; }
      th { width:*; }
      th[field] { behavior:clickable; }

      th.sorted { background: url(stock:arrow-down) no-repeat 100% 50%; }
    </style>
    
    <script type="text/tiscript">

      include "../plus.tis"; // model below uses @observing decorator defined in plus.tis
  
      namespace Todo // our model
      {  
        var items = [ {group: "A",subject:"Basic variable binding demo", done:true},
                      {group: "A",subject:"Basic function binding demo", done:true},
                      {group: "B",subject:"Basic repeatable demo", done:true},
                      {group: "B",subject:"Repeatable table", done:true},
                      {group: "C",subject:"CSS class binding", done:true},
                      {group: "A",subject:"Repeatable filtering demo", done:false},
                      {group: "B",subject:"UI events handling, Plus flavour", done:false},
                    ];

        var sortField = undefined;

        var filter = {
          status: null,
          group: "",
          subject: ""
        };

        var filteredItems = items.clone();        

        @observing "filter.*",
                   "sortField" 
          function itemsToView() 
          {

            function flt(r) {
              if(filter.status != null && r.done != filter.status) return false;
              if(filter.group != "" && r.group.indexOf(filter.group) < 0) return false;
              if(filter.subject != "" && r.subject.indexOf(filter.subject) < 0) return false;
              return true;
            }
            var out = Todo.items.filter(flt);
            switch(Todo.sortField) {
              case #done: out.sort(function(r1,r2) { return !r1.done && r2.done ? -1: 0 }); break;
              case #group: out.sort(function(r1,r2) { return r1.group.lexicalCompare(r2.group) }); break;
              case #subject: out.sort(function(r1,r2) { return r1.subject.lexicalCompare(r2.subject) }); break;
            }
            
            // merge 
            Todo.filteredItems.splice(0,Todo.filteredItems.length, ...out);          
          }
      }

      event click $(th[field]) (evt) {
        var sym = symbol(this.attributes["field"]);
        if( sym == Todo.sortField)
          Todo.sortField = undefined;
        else
          Todo.sortField = sym;
      }    

      event click $(#set-all-done) {  for(var item in Todo.items) item.done = true; }
      event click $(#set-all-pending) {  for(var item in Todo.items) item.done = false; }

      function self.ready() {
        // populate group select
        var gs = $(select#group);
        var groups = Todo.items.reduce(function(acc,r){ acc[r.group] = true; return acc; }, {});
        for( var group in Object.keys(groups).sort() )
          gs.options.$append(<option value="{group}">{group}</option>);

      }

    </script>
  </head>

<body model="Todo"> <!-- define data model we observe -->

  <note>Table below is bound with <code>Todo.items</code> array and uses filtering and ordering (click on column header).
  <br>The switch allows to select filter you need.</note>
  
  <!-- the repeateable section bound with the filter variable -->
  <table border fixedlayout>
    <tbody.filter>
      <tr>
        <td>
          <select(filter.status)> <!-- defines filter variations -->
            <option value="null">All</option>
            <option value="false">Pending</option>
            <option value="true">Complete</option>
          </select>
        </td>
        <td><select(filter.group) #group><option value="">All</option></td>
        <td>
          <input|text(filter.subject) novalue="text to lookup"/>
        </td>
      </tr>
    </tbody>
    <thead>
      <tr>
        <th field="done" class='{{sorted:sortField == #done}}' >Done</th>
        <th field="group" class='{{sorted:sortField == #group}}' >Group</th>
        <th field="subject" class='{{sorted:sortField == #subject}}' >Subject</th>
      </tr>
    </thead>
    <tbody each="item in filteredItems">
      <tr class="{{done:item.done}}">
         <td><input|checkbox(item.done)/></td>
         <td(item.group)/>
         <td(item.subject).subject/>
      <tr>
    </tbody>
  </table>

  <button#set-all-done>Set all done</button>
  <button#set-all-pending>Set all pending</button>
 
  
</body>
</html>
